<template>
    <div class="shuttle-page">
      <NavBar title="穿梭巴士" />
      
      <div class="factory-image">
        <!-- <img src="~/assets/factory.jpg" alt="工厂全景"> -->
      </div>
      
      <div class="bus-list">
        <BusItem 
          title="金属架工厂 Meral Plant" 
          distance="240M" 
          time="刚刚"
          busNumber="01"
          nextStop="下一站零件工厂"
          stops="4站/240M"
          :hasStar="true"
        />
        
        <div class="route-map">
          <div class="stop">1. 金属架工厂 Meral Plant</div>
          <div class="arrow">→</div>
          <div class="stop">2. 胶架工厂 Plastic Plant</div>
          <div class="arrow">→</div>
          <div class="stop">3. 零件工厂 Component Plant</div>
          <div class="arrow">→</div>
          <div class="stop">4. 新物流中心 New DC</div>
        </div>
        
        <BusItem 
          title="胶架工厂 Plastic Plant" 
          distance="240M" 
          time="刚刚"
          busNumber="02"
          :hasStar="true"
        />
        
        <BusItem 
          title="零件工厂 Component Plant" 
          distance="240M" 
          time="刚刚"
          busNumber="03"
        />
        
        <BusItem 
          title="新物流中心 New DC" 
          distance="240M" 
          time="刚刚"
          busNumber="04"
          :hasStar="true"
        />
      </div>
      
      <BottomNav active="home" />
    </div>
  </template>
  
  <script>
  import NavBar from '~/components/NavBar.vue'
  import BusItem from '~/components/BusItem.vue'
  import BottomNav from '~/components/BottomNav.vue'
  
  export default {
    components: {
      NavBar,
      BusItem,
      BottomNav
    }
  }
  </script>
  
  <style scoped>
  .shuttle-page {
    background: white;
    min-height: 100vh;
  }
  
  .factory-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  
  .bus-list {
    padding: 10px;
  }
  
  .route-map {
    margin: 15px 0;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    font-size: 14px;
  }
  
  .stop {
    margin: 5px 0;
  }
  
  .arrow {
    color: #999;
    text-align: center;
  }
  </style>